<template>
    <div class="result-wrapper">
      <div class="song" v-for="(item, index) in musicList" :key="'song'+index">
        <div class="name">
          <span class="iconfont icon-play" @click="toPlay(item)"></span>
          <a href="javascript:void(0)" @click="toComment(item.id)">{{item.name}}</a>
          <span class="iconfont icon-editmedia" v-if="item.mvid!=0" @click="toMv(item.mvid)"></span>
        </div>
        <div class="singer">{{item.artists | formatSinger}}</div>
        <div class="album">《{{item.album.name}}》</div>
        <!-- 持续时间 -->
        <div class="time">{{item.duration | formatTime}}</div>
      </div>
    </div>
  </template>
  
  <script>
    export default {
      data() {
        return {
          musicList: [],
        }
      },
      created() {
        this.getSongList();
      },
      // 使用局部路由首位 监听传入的路由参数，此时因为路由中的 this.$route.params.search 发生了变化，就触发 getSongList 方法获取歌曲名。
      beforeRouteUpdate(to, from, next) {
        next()
        this.getSongList()
      },
  
  
      methods: {
        async getSongList() {
          let keyword = this.$route.params.search ? this.$route.params.search : window.localStorage.getItem("keyword")
          
          // 请求真实数据
          let backData = await this.$axios.get(`/search?keywords=${keyword}`);
          this.musicList = backData.data.result.songs;
        },
        toPlay(item) {
          window.localStorage.setItem("song", JSON.stringify(item))
          // 代码跳转
          this.$router.push("/player/" + item.id)
        },
        // 去看mv
        toMv(mvid) {
          this.$router.push("/video/" + mvid)
        },
        // 去看评论
        toComment(id) {
          this.$router.push("/comment/" + id)
        },
      },
      // 过滤器
      filters: {
        // 处理格式
        formatSinger(singers) {
          // 空字符串拼接
          let temStr = '';
          // 获取所有的歌手
          for (let i = 0; i < singers.length; i++) {
            // 拼接歌手
            temStr += singers[i].name;
            // 拼接分隔符
            temStr += '/';
          }
          temStr = temStr.slice(0, -1);
          return temStr;
        },
        // 处理时间
        formatTime(time) {
          // 毫秒->秒
          const totalSec = time / 1000;
          // 秒->分 小数部分舍去
          const min = Math.floor(totalSec / 60);
          // 剩余的部分是 秒 不满足分的部分 全部到秒
          let sec = Math.floor(totalSec % 60);
          // 秒不够2位 补足2位
          sec = sec < 10 ? '0' + sec : sec;
          return min + ':' + sec;
        },
      },
    }
  </script>
  
  <style scoped>
    @import "@/assets/css/results.css";
  </style>